<!-- 登录界面 -->

<template>
  <div class="login" ref="reflayoutContainercontainer"></div>
</template>

<script>
import {
  Layout as LayoutDHX,
  Form as FormDHX,
} from 'dhx-suite-package';
import { Message, Alert } from '@/components/message';
import { mapActions } from 'vuex';

export default {
  name: 'LoginBase',
  data: () => ({
    // 0. 整体框架
    layoutContainer: null,
    // 1. 登录表单
    layoutLogin: null,
    formLogin: null,
  }),
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions('userModule', ['login']),
    init() {
      // 0. 整体框架
      this.layoutContainer = this.layoutContainer_create(
        this.$refs.reflayoutContainercontainer,
      );

      // 1. 登录表单
      this.layoutLogin = this.layoutLogin_create();
      // 1.1. 表单
      this.formLogin = this.formLogin_create();
      this.formLogin_event();
      this.formLogin_reload();

      // 挂载各组件
      this.layoutContainer.getCell('regisContainer').attach(this.layoutLogin);
      this.layoutLogin.getCell('formLogin').attach(this.formLogin);

      return this.layoutContainer;
    },
    // ////////////////////////////
    // 0. 整体框架
    layoutContainer_create(ref) {
      const mylayout = new LayoutDHX(ref, {
        cols: [
          { id: 'regisContainer' },
        ],
      });
      return mylayout;
    },

    // 1. 登录表单
    layoutLogin_create() {
      const mylayout = new LayoutDHX(null, {
        cols: [
          {
            rows: [
              { // 放登录表单
                id: 'formLogin',
                width: 400,
                height: 'content',
              },
            ],
          },
        ],
      });
      return mylayout;
    },

    // 1.1. 表单
    formLogin_create() {
      const myform = new FormDHX('form', {
        css: 'dhx_widget--bordered',
        padding: 40,
        rows: [
          { // 邮箱
            type: 'input',
            id: 'email',
            label: '邮箱',
            validation: 'email',
            placeholder: '请输入邮箱',
            required: true,
            errorMessage: '无效的邮箱',
          }, { // 输入密码
            type: 'input',
            id: 'password',
            inputType: 'password',
            label: '密码',
            placeholder: '请输入密码',
            required: true,
            errorMessage: '密码不能为空',
          }, { // 提交登录信息
            align: 'center',
            cols: [
              {
                type: 'button',
                id: 'send',
                text: '登录',
                submit: true,
                color: 'success',
                full: true,
              },
            ],
          },
        ],
      });
      return myform;
    },
    formLogin_event() {
      const myform = this.formLogin;

      myform.getItem('send').events.on('click', () => {
        // 判断表单是否合法
        if (myform.validate()) {
          // 获取登录表单内容
          const formState = myform.getValue();
          this.login(formState).then(() => {
            // 显示登录成功提示信息
            Message('登录成功');
            // 跳转主页
            this.$router.replace({ name: 'composer' });
          }).catch((err) => {
            Alert(err.response.data.msg);
          });
        }
      });
    },
    formLogin_reload() {},
  },
};

</script>

<style>
  /* 页面 */
  .login {
    margin-top: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
